<template>
    <div class="steps-container">
        <ul class="steps">
            <li v-for="(step, idx) in steps" :key="step.key" class="step" :class="{ active: currentStep === idx }"
                @click="goTo(idx)">
                <span class="label">{{ step.label }}</span>
            </li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
const steps = [
    { key: 'edit', label: '编辑表单' },
    { key: 'setting', label: '表单设置' },
    { key: 'publish', label: '表单发布' }
]

// 当前步骤（0/1/2）
const currentStep = ref(0)

function goTo(index: number) {
    currentStep.value = index
}
</script>

<style lang="scss" scoped>
.steps-container {
    padding: 16px;
    background-color: #fff;
}

.steps {
    display: flex;
    gap: 0;
    list-style: none;
    padding: 0;
    background: #f5f7fa;
    overflow: hidden;
}

.step {
    position: relative;
    flex: 1 1 0;
    text-align: center;
    color: #606266;
    background: transparent;
    cursor: pointer;
    user-select: none;
    padding: 16px 12px;
    font-size: 14px;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;

    /* 右侧箭头（菱形切角） */
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 100%;
        border: 24px solid transparent;
        border-right: 0;
        border-left: 16px solid #f5f5f5;
        /* 箭头的宽度一半，确保与下个块重叠无缝 */
        // width: 36px;
        // height: 100%;
        // background: inherit;
        // /* 继承当前块背景色以实现箭头同色 */
        // transform: skewX(-45deg);
        // box-shadow: 1px 0 0 rgba(255, 255, 255, 0.6) inset;
        // /* 右侧内阴影制造分隔感 */
        // z-index: 1;
    }

    /* 最后一个块：去掉箭头并做圆角 */
    &:last-child::after {
        display: none;
    }

    &:last-child {
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    .label {
        position: relative;
        z-index: 2;
        /* 让文字在箭头之上 */
    }
}

.step.active {
    color: #fff;
    background: #1677ff;
}
</style>